<template>
 <div class="harder">
     <div>
    <!-- 头部LOGO搜索 -->
    <div class="harder_nav">
       <div class="Logo">
         <img src="@/assets/order-images/logo.png" width="128" height="40"/>
       </div>
       <div class="search">
         <input type="text" placeholder="搜索商品/商家/品牌" v-model="form.search" @keydown="keydownShow($event)">
         <i class="el-icon-search" @click="clickIcon"></i>
       </div>
       <div class="login">
          <img :src="imgBaseUrl + userInfo.headUrl" class="user-avatar" v-if="userInfo.headUrl" />
          <img src="@/icons/icon3.png" alt="" v-else />
         <div>
           <p style="color:#6B6F81">当前登录角色：
             <span v-if="$store.state.user.userRole == 0">平台账号</span>
              <span v-else-if="$store.state.user.userRole == 1">商户账号</span>
              <span v-else>店铺账号</span>
            </p>
           <button @click="supplier" class="cwgys" >成为供应商</button>
         </div>
       </div>
    </div>
    <!-- banner图 -->
    <div class="banner_img"> 
     <el-carousel indicator-position="outside" trigger="click" :interval="3000" arrow="always" style="width:1000px;margin:auto;" >
-    <el-carousel-item v-for="(item,index) in bannerList" :key="index">
-      <img :src="item.src" style="height:100%;width:100%;margin-top:-20px;" alt="图片丢失了" />
-    </el-carousel-item>
-  </el-carousel>
    </div>
  </div>
    <!-- tab -->
    <div class="distibution_box">
    <nav class="tabNav" style="margin-top:20px;">
       <el-col :span="12" style="width:201px">
    <el-menu
      class="el-menu-vertical-demo"
      @close="handleClose"
      text-color="#606266"
      active-text-color="#23AAF2">
       <el-menu-item>
        <span slot="title" @click="alltab">全部</span>
      </el-menu-item>
      <el-submenu :index="item.id" v-for="(item,index) in lassData" :key="index">
        <template slot="title">
          <span>{{item.title}}</span>
        </template>
        <el-submenu :index="items.id" v-for="(items,i) in item.goodsCategoryModelList" :key="i" class="el-submenu-tab">
          <template slot="title"><span>{{items.title}}</span>
              <i class="el-icon-plus" style="position: absolute;top: 50%; right: 10px; margin-top: -7px;"></i>
          </template>
          <el-menu-item :index="itemx.id" v-for="(itemx,j) in items.goodsCategoryModelList" :key="j" @click="StartersTab(itemx.id,j)">
            {{itemx.title}}
            <i class="el-icon-caret-left" style="position: absolute;top: 50%; right: 10px; margin-top: -7px;"></i>
          </el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-col>
    </nav>
    
    <!-- 筛选 -->
    <div style="width:100%">
      <div class="sifting">
        <div class="titleSifting">商品筛选</div>
        <hr style="border: 1px solid #e8e8e8;">
        <div style="display: flex;">
          <div style="width:44px !important;padding-top:15px;">品牌：</div>
          <div class="brand" :class="{brandAltvo:flag == true}">
            <div v-for="(item,index) in brandData" :key="index" class="brandList">
               <el-checkbox-group v-model="checkList" @change="checkChange(item,index)">
                 <el-checkbox :label="item.id">{{item.name}}</el-checkbox> 
               </el-checkbox-group>
            </div>
          </div>
        </div>
        <span class="allBrand" @click="backallBrand" v-if="flag">收回 <i class="el-icon-arrow-up"></i></span>
        <span class="allBrand" @click="PlusBrand" v-else>更多品牌 <i class="el-icon-arrow-down"></i></span>
        <div class="pasce brand">
          <div>价格：</div>
          <el-input v-model="form.minPrice" placeholder="￥" style="width:10vw"></el-input>—<el-input  v-model="form.maxPrice" placeholder="￥" style="width:10vw;margin-left:10px;"></el-input>
          <el-button type="primary" @click="ConfirmPrice">确认</el-button>
          <el-button  @click="del">清空</el-button>
        </div>
         <div class="brand">
          <div>分销：</div>
           <div class="brandList">
              <el-radio v-model="radio" label="1" @change="DistributeChange">只展示我的供货</el-radio>
              <el-radio v-model="radio" label="2" @change="DistributeChange2">不展示我的供货</el-radio>
          </div>
        </div>
      </div>
      <!-- 排序 -->
      <div class="sortBrandBox">
        <div class="sortBrand">
          <div class="paixu">排序</div>
          <div v-for="(item,index) in sortIndexData" :key="index" class="storeText" @click="storeClick(index)" :class="{atvle:storeflag == index}">
            <div v-if="item.name == '价格'" style="position: relative;">{{item.name}}
              <i class="el-icon-caret-bottom"  @click="price_bottom" style="position: absolute;top:12px;right:13px;font-size: 20px"></i>
              <i class="el-icon-caret-top"  @click="price" style="position: absolute;top:-1px;right:13px;font-size: 20px"></i></div>
            <div v-else>{{item.name}}</div>
          </div>
        </div>
        <div class="sortRank">
          <span>共{{totalNum}}件商品</span> 
           <span style="margin:0 5px 0 20px;" v-if="DistributeData.length">{{form.pageNum}}/{{numCount}}</span>
           <span style="margin:0 5px 0 20px;" v-else>{{form.pageNum}}/1</span>
          <el-pagination background layout="prev, pager, next" :total="totalNum" :page-size="form.pageSize" :current-page="form.pageNum"
           @current-change="auditPaging" @size-change="auditSizeChange"></el-pagination>
        </div>
      </div>

      <!-- 列表 -->
      <div class="classList">
        <div class="class_list_centnt" v-for="(item,index) in DistributeData" :key="index">
          <div style="overflow: hidden;margin:30px">
            <img :src= "imgBaseUrl + item.surfaceImg" style="max-width:100%;max-heightt:100%"/>
          </div>
          <div class="pasceText">
             <div v-if="(item.title.length > 6)" seyle="margin-top:5px">{{item.title.slice(0,6) + '...'}}</div>
             <div v-else  seyle="margin-top:5px">{{item.title}}</div>
             <div class="money">￥{{item.minPrice}}</div>
              <template> 
                 <el-button type="info" v-if="item.mchId == JSON.parse($store.getters.userInfo).mchId"  class="active">我的供货</el-button>
                  <el-button type="primary" v-else-if="!item.dmgId" class="Distribution" @click="oneDistribution(item.goodsId,index,item.shelvesStatus,item.mchId)">一键分销</el-button>
                  <el-button type="info" v-else  class="active Distribution">已分销</el-button>
              </template>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" class="fenye" :total="totalNum" :page-size="form.pageSize" :current-page="form.pageNum" @current-change="auditPaging" @size-change="auditSizeChange"></el-pagination>
      <div class="postionButtom">
        <el-button type="info" style="margin-bottom:2px;" @click="clickDistribution">我的分销</el-button><br/>
        <el-button type="info" @click="clickCode">我的供货</el-button>
      </div>
    </div>
    </div>
  </div>
 
</template>

<script>
 import { getContenttree } from '@/api/storeclass'
 import {getGoodsCategoryList,} from '@/api/setSharing'
 import { getGoodsBrandList } from '@/api/brand'
 import {myMixin} from '@/layout/mixin/ResizeHandler'
 import { distributionList,isSupplier,keyDistribution, getMerchantChannelList } from '@/api/distribution'
export default {
  mixins:[myMixin],
  data() {
    return{
       //vuex里的个人信息
      userInfo: JSON.parse(this.$store.getters.userInfo),
      //图片地址
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      bannerList:[{src: require("../../icons/banner1.jpg")},{src:require("../../icons/banner2.jpg")},{src: require("../../icons/banner3.jpg"),},{src:require("../../icons/banner4.jpg")},
      {src: require("../../icons/banner5.jpg")},{src:require("../../icons/banner6.jpg")},{src: require("../../icons/banner7.jpg")},{src:require("../../icons/banner8.jpg")},
      {src: require("../../icons/banner9.jpg")},{src:require("../../icons/banner10.jpg")},{src: require("../../icons/banner11.jpg")},{src:require("../../icons/banner12.jpg")}],
      storeflag:null,
      sortIndexData:[{id:1,name:"新品"},{id:2,name:"价格"},{id:3,name:"销量"},{id:4,name:"库存"}],
      sortIndex:[],
      numCount:'',
      flag:false,//品牌展开的变量
      rSelect:[],
      countNum:0,
      totalNum:0,
      currentIndex:null,
      radio:'',
      lassData:[],//分类数据
      checkList: [],
      brandData:[],//品牌数据
      cityOptions:['只展示我的供货', '不展示我的供货'],
      cityOptionsList:[],
      DistributeData:[],//分销数据
      brandIdList:[],//品牌id数组
      form:{
        pageNum:1,
        pageSize:10,
        brandId:'',//品牌id
        mchId:this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',//商户id
        minPrice:'',//最低售价
        maxPrice:'',//最高售价
        selectType:'',//选择类型（1为只显示我的供货，2显示不显示我的供货，全部不需要请求该参数）
        categoryId:'',//类目id
        search:''//查询字段
      },
      timeout:null,//
      BodyData:{//一键分销参数
       goodsId:'',
       mchId:this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',//商户id
       cid:null,//渠道id
       source:JSON.parse(this.$store.state.user.userInfo).userType,
       shelvesStatus:null
     },
      HaveDistribution:null,//分销状态
      HaveDistributionIndex:null,
    }
  },
  created() {
    this.pipeline()
    this.lassMethods()
    this.brandMethod()
    this.Distribute()
    this.BodyData.createTime = this.getNowFormatDate()//转换时间格式
  },
  watch:{
    'form.search':{//防抖
       handler(newName, oldName) {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.Distribute()
        }, 500)
       },
     immediate: true,
    // deep:true
    }
  },
  methods:{
      //键盘事件 搜索
    keydownShow(e) {
      if (e.keyCode == 13) {
        this.Distribute()
      }
    },
    async pipeline() {//获取渠道
        let res = await getMerchantChannelList({id:JSON.parse(this.$store.state.user.userInfo).id})
        if(res.code == 200) {
          res.data.list.forEach(item => {
            this.BodyData.cid = item.id
          });
        }
      },
    clickIcon() {//搜索
       this.Distribute();
    },
      // handleOpen(key) {//tab展开的回调
      //    console.log(key);
      //   this.form.categoryId = key
      //   this.Distribute();
      // },
      handleClose(key, keyPath) {//tab收回的回调
       
      },
  async lassMethods() {//商品分类
      let res = await getContenttree()
      if(res.code == 200) {
        this.lassData = res.data
      }
    },
  async brandMethod() {//品牌列表
    let res = await getGoodsBrandList()
    if(res.code == 200) {
      this.brandData = res.data
    }
  },
  async Distribute() {//分销列表
    let res = await distributionList(this.form)
    if(res.code == 200) {
      this.DistributeData = res.data.list
      this.sortIndex = res.data.list
      this.totalNum = res.data.total
      this.countNum = res.data.total 
      this.numCount = Math.ceil(res.data.total/10)
      this.form.brandId = null
       this.form.selectType = null
    }
  },
  checkChange(val,i) {//品牌多选框触发
    this.checkList.forEach((item,index) => {
      if(item == true && index == i){
         this.brandIdList.push(val.id)
      }else if(item == false && index == i){
         this.brandIdList.splice(i,1)
      }
    })
    this.form.brandId = this.checkList.join(',')
    this.Distribute()
    
  },
  PlusBrand() {//点击更多品牌
    this.flag = true
  },
  backallBrand() {//点击收回
    this.flag = false
    console.log(123)
  },
  alltab() {//全部
  this.form.categoryId = null
    this.Distribute()
  },
  ConfirmPrice() {//价格搜索
    this.Distribute()
  },
  DistributeChange() {//分销单选框
    this.form.selectType = 1
    this.Distribute()
  },
   DistributeChange2() {//分销单选框
    this.form.selectType = 2
    this.Distribute()
  },
  del() {//清空搜索条件
   this.checkList = []
   this.form.maxPrice = ''
   this.form.minPrice = ''
   this.cityOptions = []
   this.radio = ''
   this.Distribute()
  },
  StartersTab(id,index) {//三级商品类目点击
    this.form.categoryId = id
    this.Distribute()
  },
  auditPaging(val) {//分页
   this.form.pageNum = val
   this.Distribute()
  },
   auditSizeChange(val) {
     this.form.pageSize = val
     this.Distribute()
   },
   clickDistribution() {//跳转商品
      this.$router.push({ name:"StoreList", query:{id:1}})
   },
   clickCode() {//跳转我的供货
      this.$router.push({
        name:"DistributionMySupply"//跳转我的供货
      })
   },
   async oneDistribution(id,index,status) {//一键分销
      this.BodyData.goodsId = id
      this.BodyData.shelvesStatus = status
     let res = await keyDistribution(this.BodyData)
      if(res.code == 200) {
        this.HaveDistribution = true
        this.HaveDistributionIndex = index
         this.$message({ message: '分销商品成功', type: 'success'});
         this.Distribute()
      }
    
   },
    async supplier() {//判断是否已经成为供应商
      const res = await isSupplier({
        id:this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',//商户id
        userId:JSON.parse(this.$store.state.user.userInfo).id,//用户id
      })
       if(res.code == 204){
          this.$message('您还未成为供应商')
          this.$router.push({
          name:"DistributionSupplier"
        })
       }else if(res.code == 200){
           this.$message('您已是供应商')
       }
    },
  sortKey(array, key) {
    return array.sort(function(a, b) {
      var x = a[key];
      var y = b[key];
      return x > y ? -1 : x < y ? 1 : 0;
    });
    },
    price_bottom_sort(array, key) {
    return array.sort(function(a, b) {
      var x = a[key];
      var y = b[key];
      return x < y ? -1 : x > y ? 1 : 0;
    });
    },
    storeClick(index) {//点击排序
      this.storeflag = index
      if(index == 0) {//新品排序
        this.totalNum = this.countNum
        this.DistributeData = this.sortIndex
        return this.sortKey(this.DistributeData, "updateTime")
      }else if(index == 1) {
        // this.DistributeData = this.sortIndex
        // return this.price_bottom_sort(this.DistributeData, "minPrice")
      }else if(index == 2) {//销量-从大到小排序initVolume
        this.totalNum = this.countNum
        this.DistributeData = this.sortIndex
        return this.sortKey(this.DistributeData, "initVolume")
       
      }else{//库存排序
       this.totalNum = this.countNum
        this.DistributeData = this.sortIndex
        return this.sortKey(this.DistributeData, "sumQty")
      }
    },
    // storePrice() {
    // this.DistributeData = this.sortIndex
    //  return this.price_bottom_sort(this.DistributeData, "minPrice")
    // },
   price() {//价格排序-从大到小
    this.totalNum = this.countNum
    this.DistributeData = this.sortIndex
    return this.sortKey(this.DistributeData, "minPrice")
   
   },
   price_bottom() {//价格排序-从小到大
    this.totalNum = this.countNum
   this.DistributeData = this.sortIndex
    return this.price_bottom_sort(this.DistributeData, "minPrice")
  
   },
}
}
</script>
<style scoped lang="scss">
  .harder{
    background: #f4f5fa;
  }
// tab样式
  .distibution_box{
     margin:10px 20px 20px 0;
    display: flex;
  ::v-deep .el-submenu-tab .el-submenu__icon-arrow{
     display:none !important;
   }


// 筛选样式
    .sifting{
      // width:100%;
      margin:20px 0px 0px 20px;
      padding:20px;
      background: #ffffff;
      border-radius: 6px;
      .titleSifting{
        font-size:18px;
        font-family: PingFang SC, PingFang SC-Heavy;
        font-weight: 800;
        color: #464855;
      }
      .brand{
         width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 50px;
        overflow: hidden;
        .brandList{
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          height: 50px;
          line-height: 50px;
          .el-checkbox:last-of-type{
            margin-right:1vw;
          }
        }
      }
      .brandAltvo{
        height: 400PX;
      }
        .allBrand{
          text-align: center;
          height: 50px;
          line-height: 50px;
          color: #23A9F2;
        }
         .allBrand{
            cursor:default;
         }
      .pasce{
        .el-input{
          margin-right: 10px;
        }
        .el-button--medium{
          margin: 0 10px;
        }
      }
    }
    
// 排序样式
    .sortBrandBox{
      margin:20px 0px 0 20px;
      display: flex;
      align-items: center;
      // width:87vw;
      justify-content: space-between;
      background:#fff;
      padding:15px 20px;
      border-radius: 6px;
      .sortBrand{
        display:flex;
        align-items: center;
        height: 50px;
        .paixu{
              font-size: 18px;
              font-family: PingFang SC, PingFang SC-Heavy;
              font-weight: 800;
              color: #464855;
        }
        .storeText{
          width:100px;
          height:30px;
          background: #fff;
          line-height: 30px;
          margin: 0 20px;
          border-right:0;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #6b6f81;
          cursor:default;
        }
        .atvle{
          color: #22A6F2;
          // background: #22A6F2;
        }
       
      }
      .sortRank{
        display:flex;
        align-items: center;
      }
    }
  }
  ::v-deep  .sortRank .btn-prev{
      
        margin-right:2px !important;
       }
  ::v-deep .sortRank .btn-next{
        
          margin:0 !important;
  }
  ::v-deep .sortRank .el-pager{
    display:none !important;
  }


  .classList{
    padding-bottom:20px;
    // width: 87vw;
    display: flex;
    flex-wrap: wrap;
    margin-left:20px;
    border:1px solid #F2F2F2;
    .class_list_centnt{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width:15%;
      height: 350px;
      background: #fff;
      border-radius: 5px;
      margin:1% 2%;
      text-align: center;
      box-sizing: content-box;
     .pasceText{
        line-height: 0px;
        margin-bottom: 30px;
       .money{
         line-height: 40px;
         font-size: 18px;
          font-weight: 700;
          color: red;
       }
       .Distribution{
      
         padding:7px 6px;
       }
       .active{
        //  width:45%;
         padding:7px 15px;
       }
     }
    }
  }

  ::v-deep .el-pagination{
    text-align: end !important;
    margin:20px 20px 20px 0;
  }



  // 头部样式
  .harder_nav{
  display: flex;
  padding: 15px 20px 15px 20px;
  align-items: center;
  justify-content: center;
  .Logo{
    width: 15%;
    text-align: center;
    font-size: 30px;
    color: #7f7f7f;
  }
  .search{
    width: 65%;
    position: relative;
    text-align: center;
    input{
     
      height: 45px;
      width: 45%;
      border: none;
      border-radius: 50px;
      text-indent: 2em;
      outline: none;
    }
    button{
      height: 36px;
      width: 70px;
      border: none;
      margin-top: 0px;
      outline: none;
    }
  }
  .login{
    width: 20%;
    display: flex;
    img{
      width: 90px;
    height: 100px;
    }
    div{
      margin-top: 0px;
      margin-left: 20px;
    }
  }
}
.banner_img{
  width: 100%;
  height:300px;
  background: #E8E8E8;
//   background-image: url("../../icons/新年.jpg");
//   background-size: cover;
//   background-repeat: no-repeat;
 }

.postionButtom{
  position:fixed;
  right: 0;
  bottom:184px;
}
.cwgys{
  width: 98px;
  height: 30px;
  background: #005bac;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  color: #fff;
      border: none;
    outline: none;
}
.el-icon-search{
  z-index:-1;
  position: absolute;
  top: 14px;
  font-size: 20px;
  right: 30%;
  margin-left: -200px;
  color: #005bac;
  z-index:999;
}
::v-deep .fenye button{
  background: #ffffff!important;
}
::v-deep .el-button--primary{
  background: #005bac;
  border-color: #005bac;
}
@media screen and (max-width: 1024px) {  
      .class_list_centnt {  
         height: 200px!important; 
      }  
  }  
::v-deep .el-carousel__indicators--outside{
  position:absolute !important;
  left: 28%;
  bottom:5px;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
